<template>
  <div class="demo-image__lazy">
    <div v-for="url in urlImgs" :key="url" @click="dialogVisible=true,info.url=url">
      <el-image :src="url" lazy />
    </div>
  </div>
  <PageComp :page="pageInfo" @page-change="historyFile"></PageComp>

  <!-- 修改用户信息对话框部分 -->
  <el-dialog v-model="dialogVisible" title="用户图片修改" width="30%" :before-close="handleClose">
    <div style="margin: 20px" />

    <el-form :label-position="labelPosition" label-width="100px" :model="updateinfo" style="max-width: 460px">
      <el-form-item>
        <img :src="info.url" style="width: 100px; height: 100px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="updateimg(info.url)"> 修改 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElImage, ElMessageBox,ElDialog,ElForm,ElFormItem ,ElButton} from 'element-plus'
import { L12030 } from '../api/L12030'
import { ref } from 'vue'
import { BaseResult, PageInfo } from '../ts/BaseResult'
import PageComp from './PageComp.vue'
import { Tools } from '../ts/Tools'
import { TbUserInfo } from '../ts/UserInfo'
const dialogVisible = ref(false)
const info=ref({
  url:""
})
const pageInfo = ref(new PageInfo())
const labelPosition = ref<FormProps['labelPosition']>('right')
  const updateinfo = ref(new TbUserInfo())
const urls = ref([])
const urlname = ref({
  fileName: '',
  info: '',
})

const urlImgs = ref([])

const urlss = ref({
  img: '',
})

function historyFile() {
  L12030.get('/file', Tools.concatJson(urlname.value, pageInfo.value), (data: BaseResult) => {
    if (data.success) {
      urls.value = data.data
      pageInfo.value = data.page
      for (let i = 0; i < urls.value.length; i++) {
        urls.value[i].fid
        urlImgs.value[i] = L12030.getFileUrl(urls.value[i].fid)
      }
    }
  })
}

function updateimg(info: String) {
  urlss.value.img = info
    L12030.put('/userinfo', urlss.value, (data: BaseResult) => {
      data.success ? ElMessageBox.alert('修改成功') : ElMessageBox.alert('修改失败')
      location.reload();
    })
}
historyFile()
</script> 

<style scoped>
.demo-image__lazy {
  height: 400px;
  width: 400px;
  overflow-y: auto;
}
.demo-image__lazy .el-image {
  display: block;
  min-height: 200px;
  margin-bottom: 10px;
}
.demo-image__lazy .el-image:last-child {
  margin-bottom: 0;
}
</style>
